<template>
  <div class="app-container">

    <el-row :gutter="24">

      <el-col :span="24" style="margin-bottom: 20px">

        <el-alert title="点击`开始考试`后将自动进入考试，请诚信考试！" type="error" style="margin-bottom: 10px" />

        <el-card class="pre-exam">

          <div><strong>考试名称：</strong>{{ detailData.examTitle }}</div>
          <div><strong>考试时长：</strong>{{ detailData.totalTime }}分钟</div>
          <div><strong>试卷总分：</strong>{{ detailData.totalScore }}分</div>
          <div><strong>及格分数：</strong>{{ detailData.qualifyScore }}分</div>
          <div><strong>考试描述：</strong>{{ detailData.examContent }}</div>
          <div><strong>开放类型：</strong> {{ detailData.openType | examOpenType }}</div>

        </el-card>

      </el-col>

      <el-col :span="24">

        <el-button :loading="loading" type="primary" icon="el-icon-caret-right" @click="enterExam">
          开始考试
        </el-button>

        <el-button @click="handleBack">
          返回
        </el-button>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import { fetchDetail } from '@/api/exam/exam'
import { createPaper } from '@/api/paper/exam'
import { getQualify } from '@/api/paper/paper'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      detailData: {},
      postForm: {
        examId: '',
        userId: this.$store.state.user.userId
      },
      couldEnter: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    const id = this.$route.params.examId
    if (typeof id !== 'undefined') {
      this.postForm.examId = id;
      let res = await this.fetchData();
      this.detailData = res.data;
      if (this.detailData.openType === 1)
        this.checkQualification();
    }

  },

  methods: {

    async fetchData() {
      return await fetchDetail({ id: this.postForm.examId })
    },

    enterExam(){
      if(this.detailData.openType === 1 && this.couldEnter){
        this.handleCreate()
      }else if(this.detailData.openType === 0){
        this.handleCreate();
      }else if(this.detailData.openType === 1 && !this.couldEnter){
        this.$message({
          type: 'warning',
          message: '您没有资格参加本场考试'
        })
      }
    },

    handleCreate() {
      const that = this
      this.loading = true
        createPaper(this.postForm).then(response => {
          console.log(response)

          if (response.code === 200) {
            setTimeout(function () {
              this.loading = false
              that.dialogVisible = false
              localStorage.setItem("exam_id", that.postForm.examId)
              that.$router.push({ name: 'StartExam', params: { id: response.data } })
            }, 1000)
          }
        }).catch(() => {
          this.loading = false
        })
    },

    handleBack() {
      this.$router.push({ name: 'ExamOnline' })
    },

    checkQualification() {
      const params = {
        id: this.name,
        examId: this.postForm.examId
      }
      getQualify(params).then(res => {
        this.couldEnter = res.data
      })
    }
  }
}
</script>

<style scoped>
.pre-exam div {

  line-height: 42px;
  color: #555555;
}
</style>

